<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
    
    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="libs/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">

  </head>
  <body>
    <header id="header">
        <div class="topbar visible-md visible-lg">
            <div class="container">
                <div class="row">
                    <div class="col-md-2 text-center">
                        <a href="#" id="mobile-img">
                          <i class="icon-mobilephone"></i>
                            <span>手机微金所</span>
                            <i class="glyphicon glyphicon-chevron-down"></i>
                            <img src="img/c_06.jpg">
                        </a>
                    </div>
                    <div class="col-md-5 text-center">
                        <i class="icon-telephone"></i>
                        <span>4006-89-4006（服务时间：9:00-21:00）</span>
                    </div>
                    <div class="col-md-2 text-center">
                        <a href="#" id="top-font">常见问题</a>
                        <a href="#" id="top-font">财富登录</a>
                    </div>
                    <div class="col-md-3 text-center">
                        <a href="#" class="btn btn-register btn-sm">免费注册</a>
                        <a href="#" class="btn btn-link btn-sm" id="top-font">登录</a>
                    </div>

                </div>
            </div>
        </div>
        <nav class="navbar navbar-register" data-spy="affix" data-offset-top="60" data-offset-bottom="500">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">
                <i class="icon-icon"></i>
                <i class="icon-logo"></i>
              </a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li class="active"><a href="">我要投资</a></li>
                <li><a href="">我要借款</a></li>
                <li><a href="">平台介绍</a></li>
                <li><a href="">新手专区</a></li>
                <li><a href="">最新动态</a></li>
                <li><a href="">微论坛</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right hidden-sm">
                <li><a href="">个人中心</a></li>
            </ul>
            </div>
          </div>
        </nav>
    </header>
      <section id="main_ad" class="carousel slide" data-ride="carousel">
              <!-- 指示器 -->
              <ol class="carousel-indicators">
                <li data-target="#main_ad" data-slide-to="0" class="active"></li>
                <li data-target="#main_ad" data-slide-to="1"></li>
                <li data-target="#main_ad" data-slide-to="2"></li>
              </ol>

              <!-- 幻灯片 -->
              <div class="carousel-inner" role="listbox">
                <div class="item active"  data-img-lg="./img/slide_01_2000x410.jpg" data-img-sm="./img/slide_01_640x340.jpg"></div>
                <div class="item"  data-img-lg="./img/slide_02_2000x410.jpg" data-img-sm="./img/slide_02_640x340.jpg"></div>
                <div class="item"  data-img-lg="./img/slide_03_2000x410.jpg" data-img-sm="./img/slide_03_640x340.jpg"></div>
              </div>

              <!-- 控制器 -->
              <a class="left carousel-control" href="#main_ad" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="right carousel-control" href="#main_ad" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
      </section>
      <!-- 特色介绍 -->
      <section id="tese11" class="hidden-xs">
          <div class="container" id="tese">
              <div class="row">
                  <div class="col-sm-6 col-md-4 hidden-xs">
                      <a href="#">
                        <div class="media">
                          <div class="media-left">
                            <i class="icon-uniE907"></i>
                          </div>
                          <div class="media-body">
                            <h4 class="media-heading">支付交易保障</h4>
                            银联支付全程保证支付安全
                          </div>
                        </div>
                      </a>
                  </div>
                  <div class="col-sm-6 col-md-4 hidden-xs">
                      <a href="#">
                        <div class="media">
                          <div class="media-left">
                            <i class="icon-uniE907"></i>
                          </div>
                          <div class="media-body">
                            <h4 class="media-heading">支付交易保障</h4>
                            银联支付全程保证支付安全
                          </div>
                        </div>
                      </a>
                  </div>
                  <div class="col-sm-6 col-md-4 hidden-xs">
                      <a href="#">
                        <div class="media">
                          <div class="media-left">
                            <i class="icon-uniE907"></i>
                          </div>
                          <div class="media-body">
                            <h4 class="media-heading">支付交易保障</h4>
                            银联支付全程保证支付安全
                          </div>
                        </div>
                      </a>
                  </div>
                  <div class="col-sm-6 col-md-4 hidden-xs">
                      <a href="#">
                        <div class="media">
                          <div class="media-left">
                            <i class="icon-uniE907"></i>
                          </div>
                          <div class="media-body">
                            <h4 class="media-heading">支付交易保障</h4>
                            银联支付全程保证支付安全
                          </div>
                        </div>
                      </a>
                  </div>
                  <div class="col-sm-6 col-md-4 hidden-xs">
                      <a href="#">
                        <div class="media">
                          <div class="media-left">
                            <i class="icon-uniE907"></i>
                          </div>
                          <div class="media-body">
                            <h4 class="media-heading">支付交易保障</h4>
                            银联支付全程保证支付安全
                          </div>
                        </div>
                      </a>
                  </div>
                  <div class="col-sm-6 col-md-4 hidden-xs">
                      <a href="#">
                        <div class="media">
                          <div class="media-left">
                            <i class="icon-uniE907"></i>
                          </div>
                          <div class="media-body">
                            <h4 class="media-heading">支付交易保障</h4>
                            银联支付全程保证支付安全
                          </div>
                        </div>
                      </a>
                  </div>
              </div>
          </div>
      </section>
      <!-- 立即预约 -->
      <section id="ljyy">
          <div class="container">
              <p class="pull-left"><i class="icon-uniE906"></i>现在有<span>458</span>人在排队，累计预约交易成功<span>7409</span>次。 什么是预约投标？ <a id="yuyue">立即预约</a>
              </p>
              <p class="pull-right hidden-sm hidden-xs">
                  <a href="#">
                      <i class="icon-uniE905"></i>
                      微金所企业宣传片
                  </a>
              </p>
          </div>
      </section>
      <!-- 产品推荐 -->
      <section id="products">
        <div class="container">
          <!-- Nav tabs -->
          <!-- 
            实现移动端滚动条功能
            1、动态设置ul宽度(宽度需要适应屏幕大小)
            2、给ul加一个容器，让ul有滚动条；
           -->
          <div class="ul-wapper">
            <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#tab_01" aria-controls="tab_01" role="tab" data-toggle="tab">特别推荐
</a></li>
            <li role="presentation"><a href="#tab_02" aria-controls="tab_02" role="tab" data-toggle="tab">微投资</a></li>
            <li role="presentation"><a href="#tab_03" aria-controls="tab_03" role="tab" data-toggle="tab">微小宝</a></li>
            <li role="presentation"><a href="#tab_04" aria-controls="tab_04" role="tab" data-toggle="tab">微消费</a></li>
            <li role="presentation"><a href="#tab_04" aria-controls="tab_04" role="tab" data-toggle="tab">微增利</a></li>
            <li role="presentation"><a href="#tab_04" aria-controls="tab_04" role="tab" data-toggle="tab">微金宝</a></li>
            <li role="presentation"><a href="#tab_04" aria-controls="tab_04" role="tab" data-toggle="tab">微转让</a></li>
            <li class="pull-right"><a href="#">更多</a></li>
          </ul>
          </div>


          <!-- Tab panes -->
          <div class="tab-content" id="product-panels">
            <div role="tabpanel" class="tab-pane fade in active" id="tab_01">
                <div class="container">
                    <div class="row">
                        <div class="col-md-4 col-xs-12 col-sm-6">
                            <div class="panel panel-register active">
                              <div class="panel-heading" id="product-p">
                                <p><strong>8</strong><sub>%</sub></p>
                                <p>年利率</p>
    
                              </div>
                              <div class="panel-body">
                                <h4>新手体验表0008期</h4>
                                  <div class="col-xs-6 text-left">
                                    <p>起步价</p>
                                    <p><strong>1000</strong><sub>万</sub></p>
                                  </div>
                                  <div class="col-xs-6 text-right"><p>起步价</p>
                                    <p><strong>1000</strong><sub>万</sub></p></div>
                                  <div class="col-xs-6 text-left" style="margin-top: 10px;"><p>起步价</p>
                                    <p><strong>1000</strong><sub>万</sub></p></div>
                                  <div class="col-xs-6 text-right" style="margin-top: 10px;"><p>起步价</p>
                                    <p><strong>1000</strong><sub>万</sub></p></div>
                              </div>
                            </div>
                        </div>
                        

                        <div class="col-md-4 col-xs-12 col-sm-6">
                            <div class="panel panel-register disable">
                              <div class="panel-heading" id="product-p">
                                <p class="tooltips">
                                  <a href="#" class="badge" id="tool-1" data-toggle="tooltip" data-placement="top" title="北京欢迎你">京</a>
                                  <a href="#" class="badge" id="tool-2" data-toggle="tooltip" data-placement="top" title="上海欢迎给你">沪</a>
                                </p>
                                <p><strong>8</strong><sub>%</sub></p>
                                <p>年利率</p>
    
                              </div>
                              <div class="panel-body">
                                <h4>新手体验表0008期</h4>
                                  <div class="col-xs-6 text-left">
                                    <p>起步价</p>
                                    <p><strong>1000</strong><sub>万</sub></p>
                                  </div>
                                  <div class="col-xs-6 text-right"><p>起步价</p>
                                    <p><strong>1000</strong><sub>万</sub></p></div>
                                  <div class="col-xs-6 text-left" style="margin-top: 10px;"><p>起步价</p>
                                    <p><strong>1000</strong><sub>万</sub></p></div>
                                  <div class="col-xs-6 text-right" style="margin-top: 10px;"><p>起步价</p>
                                    <p><strong>1000</strong><sub>万</sub></p></div>
                              </div>
                            </div>
                        </div>


                        <div class="col-md-4 col-xs-12 col-sm-6">
                            <div class="panel panel-register" >
                              <div class="panel-heading">
                                <p><strong>8</strong><sub>%</sub></p>
                                <p>年利率</p>
    
                              </div>
                              <div class="panel-body">
                                <h4>新手体验表0008期</h4>
                                  <div class="col-xs-6 text-left">
                                    <p>起步价</p>
                                    <p><strong>1000</strong><sub>万</sub></p>
                                  </div>
                                  <div class="col-xs-6 text-right"><p>起步价</p>
                                    <p><strong>1000</strong><sub>万</sub></p></div>
                                  <div class="col-xs-6 text-left" style="margin-top: 10px;"><p>起步价</p>
                                    <p><strong>1000</strong><sub>万</sub></p></div>
                                  <div class="col-xs-6 text-right" style="margin-top: 10px;"><p>起步价</p>
                                    <p><strong>1000</strong><sub>万</sub></p></div>
                              </div>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="tab_02">测试文本111111</div>
            <div role="tabpanel" class="tab-pane fade" id="tab_03">...</div>
            <div role="tabpanel" class="tab-pane fade" id="tab_04">...</div>
          </div>

        </div>
      </section>

      <!-- 行业资讯 -->
      <section id="news">
        <div class="container">
          <div class="row">
            <div class="col-sm-2 col-sm-offset-3">
              <div class="news-title">
                <p>全部新闻</p>
              </div>
            </div>
            <div class="col-sm-1">
            <ul class="nav nav-pills nav-stacked">
                <li role="presentation" class="active">
                    <a href="#news01" data-title="全部新闻" data-toggle="tab"><i class="icon-news01"></i></a>
                </li>
                <li role="presentation"><a href="#news02" data-title="媒体新闻" data-toggle="tab"><i class="icon-news02"></i></a></li>
                <li role="presentation"><a href="#news03" data-title="行业资讯" data-toggle="tab"><i class="icon-news03"></i></a></li>
                <li role="presentation"><a href="#news04" data-title="XXXX" data-toggle="tab"><i class="icon-news04"></i></a></li>
            </ul>
            </div>
            <div class="col-md-6">
              <div class="tab-content">
                <div role="tabpanel" class="tab-pane active fade in" id="news01">
                  <ul>
                    <li>微金所发钱了，快来抢！！！！！</li>
                    <li>微金所发钱了，快来抢！！！！！</li>
                    <li>微金所发钱了，快来抢！！！！！</li>
                    <li>微金所发钱了，快来抢！！！！！</li>
                    <li>微金所发钱了，快来抢！！！！！</li>
                    <li>微金所发钱了，快来抢！！！！！</li>
                    <li>微金所发钱了，快来抢！！！！！</li>
                    <li>微金所发钱了，快来抢！！！！！</li>
                    <li>微金所发钱了，快来抢！！！！！</li>
                    <li>微金所发钱了，快来抢！！！！！</li>
                  </ul>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="news02">
                    <ul>
                <li>微金所发美女了，快来抢！！！！！</li>
                <li>微金所发美女了，快来抢！！！！！</li>
                <li>微金所发美女了，快来抢！！！！！</li>
                <li>微金所发美女了，快来抢！！！！！</li>
                <li>微金所发美女了，快来抢！！！！！</li>
                <li>微金所发美女了，快来抢！！！！！</li>
                <li>微金所发美女了，快来抢！！！！！</li>
                <li>微金所发美女了，快来抢！！！！！</li>
                <li>微金所发美女了，快来抢！！！！！</li>
                <li>微金所发美女了，快来抢！！！！！</li>
              </ul>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="news03">
                    <ul>
                <li>微金所发房子了，快来抢！！！！！</li>
                <li>微金所发房子了，快来抢！！！！！</li>
                <li>微金所发房子了，快来抢！！！！！</li>
                <li>微金所发房子了，快来抢！！！！！</li>
                <li>微金所发房子了，快来抢！！！！！</li>
                <li>微金所发房子了，快来抢！！！！！</li>
                <li>微金所发房子了，快来抢！！！！！</li>
                <li>微金所发房子了，快来抢！！！！！</li>
                <li>微金所发房子了，快来抢！！！！！</li>
                <li>微金所发房子了，快来抢！！！！！</li>
              </ul>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="news04">
                    <ul>
                <li>微金所发宝马了，快来抢！！！！！</li>
                <li>微金所发宝马了，快来抢！！！！！</li>
                <li>微金所发宝马了，快来抢！！！！！</li>
                <li>微金所发宝马了，快来抢！！！！！</li>
                <li>微金所发宝马了，快来抢！！！！！</li>
                <li>微金所发宝马了，快来抢！！！！！</li>
                <li>微金所发宝马了，快来抢！！！！！</li>
                <li>微金所发宝马了，快来抢！！！！！</li>
                <li>微金所发宝马了，快来抢！！！！！</li>
                <li>微金所发宝马了，快来抢！！！！！</li>
              </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- 合作伙伴 -->
      <section id="hzhb">
          <div class="container text-center">
              <h3>合作伙伴</h3>
              <ul class="center-block">
                  <li><a href="#"><i class="icon-uniE930"></i></a></li>
                  <li><a href="#"><i class="icon-uniE92F"></i></a></li>
                  <li><a href="#"><i class="icon-uniE92E"></i></a></li>
                  <li><a href="#"><i class="icon-uniE92A"></i></a></li>
                  <li><a href="#"><i class="icon-uniE929"></i></a></li>
                  <li><a href="#"><i class="icon-uniE931"></i></a></li>
                  <li><a href="#"><i class="icon-uniE92C"></i></a></li>
                  <li><a href="#"><i class="icon-uniE92B"></i></a></li>
                  <li><a href="#"><i class="icon-uniE92D"></i></a></li>
              </ul>
          </div>
      </section>
    <footer id="footer"></footer>


    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
  </body>
</html>